<template>
  <div class="pagination-wrap">
    <a-pagination
      show-quick-jumper
      v-model="currentPagination"
      :show-total="(total) => `共${Math.ceil(total)}条`"
      :defaultPageSize="5"
      :total="total"
      :page-size="pageSize"
      :item-render="itemRender"
      @change="onChange"
    />
    <!-- <a-button class="pagination-btn">确定</a-button> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPagination: 1,
    }
  },
  props: {
    total: Number,
    pageSize: {
      type: Number,
      default: () => 10
    },
    pageNum: Number
  },
  watch: {
    pageNum: {
      handler(v) {
        if (v) {
          this.currentPagination = v
        }
      },
      deep: true
    }
  },
  components: {},
  methods: {
    resetPagination() {
      this.currentPagination = 1
    },
    itemRender(current, type, originalElement) {
      // if (type === 'prev') {
      //   return (
      //     <div>
      //       <a-button class="no-r" onClick={this.toFirstPage}> 首页 </a-button>
      //       <a-button class="no-icon-r">
      //         <a-icon type="caret-left" />
      //       </a-button>
      //     </div>
      //   )
      // }
      // if (type === 'next') {
      //   return (
      //     <div>
      //       <a-button class="no-icon-l">
      //         <a-icon type="caret-right" />
      //       </a-button>
      //       <a-button class="no-l" onClick={this.toLastPage}> 末页 </a-button>
      //     </div>
      //   )
      // }
      // return originalElement
      if (type === 'prev') {
        return <div>
          <a-button class="no-r">上一页</a-button>
        </div>
      } if (type === 'next') {
        return <div>
          <a-button class="no-l">下一页</a-button>
        </div>
      }
      return originalElement
    },
    // toFirstPage(e) {
    //   e.stopPropagation()
    //   this.onChange(1)
    // },
    // toLastPage(e) {
    //   e.stopPropagation()
    //   this.onChange(Math.ceil(this.$props.total / 5))
    // },
    onChange(e) {
      this.currentPagination = e
      this.$emit('pageChange', e)
    }
  }
}
</script>
